<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>发布</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/jquery.mobile-1.4.5.min.js"></script>
	<style>
		.div1{
			width: 50px;position: relative;left: 20px;top: 20px;
		}
		.div1 img{
			width: 50px;
		}
		.div1 span{
			display: inline-block;top: -54px;left: 62px; position: relative;color: rgb(101,114,159);font-size: 26px;width: 250px;
		}
		.div2{
			width: 73%;position: relative;left: 84px;top: -47px;
		}
		.div3{
			position: relative;top: -48px;margin-right: 35px;
		}
		.div3 span{
			float: right;margin-left: 8px;margin-top: -4px;
		}
		.div3 img{
			width: 20px;float: right;
		}
		textarea.ui-input-text { min-height: 100px;  }
	</style>
	<script>
	$(function(){
		
		//发布评论
		$("#btn").click(function(){
			var content = $("#content").val();
			var my = {
				//"userID":2,
				"comments":content,
				"counts":0
			};
			$.ajax({
		        url: "http://192.168.199.218:8080/xdc/my/add",
		        contentType:'application/json;charset=utf-8',
		        data:JSON.stringify(my),	//JSON转字符串
				type:"post",
				xhrFields: {
				    withCredentials: true
				},
				crossDomain: true,
		        success: function(result){
					location.reload();		//重新加载页面
					$("#content").val("");	//内容框置空
		        },
		        fail: function(res){
		        	
		        }
		   });
		});
		
		var html = '';
		var myList = [];
		
		//读取评论列表
		$.ajax({
			type:"get",
			url:"http://192.168.199.218:8080/xdc/my",
			//保持session一样
			xhrFields: {
			    withCredentials: true
			},
			crossDomain: true,
			success: function(res){
				myList = res;
				$.each(myList, function(k,v) { //这里的函数参数是键值对的形式，k代表键名，v代表值
					html += '<div style="background-color: #FFFFFF;">'
							+ '<div class="div1">'
							+ '<img src="img/QQ.jpeg"/>'
							//+ '<span>'+myList[k].userId+'</span>'
							+ '<span>游客</span>'
							+ '</div>'
							+ '<div class="div2">'
							+ '<p>'+myList[k].comments+'</p>'
							+ '</div>'
							//触发点赞事件
							+ '<div id="comments" class="div3" onclick="getLike('+ myList[k].id +')">'
							// 点赞id
							+ '<span id="'+myList[k].id+'">'+myList[k].counts+'</span>'
							+ '<img src="img/dianz.png"/>'
							+ '</div>'
							+ '</div>'
		        });
				$("#comment").html(html);
			}
		});
	})
	
	//点赞
	function getLike(count){
		$.ajax({
			type:"get",
			url:"http://192.168.199.218:8080/xdc/my/addLove?count="+count,
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			success: function(res){
				var newlike = parseInt($('#'+count).html()) + 1;
				$('#'+count).html(newlike);
			},
			error:function(res){
				console.log(44);
			}
		});
	}
	</script>

</head>

<body>
<div data-role="page">
	<div data-role = "header" data-theme="a" data-position="fixed"  data-tap-toggle = "false">
		<a href="main.html">主页</a>
		<h1>评论</h1>
		<a href="about.html">关于</a>
	</div>
	
	
	<div data-role="content" style="background-color: #FFFFFF;">
			<label for="where" >内容</label>
			<textarea name="where" id="content"></textarea>
			<button id="btn" style="margin-top: 30px;">发布</button>
	</div>	
	
	
	<div data-role="content" id="comment">

	</div>

	
	
	<div data-role = "footer" data-theme="a" data-position="fixed"  data-tap-toggle = "false">
		<div data-role = "navbar">
			<ul>
				<li><a id="home" href="main.html" data-icon = "home" data-ajax=false>主页</a></li>
				<li><a id="review" href="review.html" data-icon = "edit" data-ajax=false>评论</a></li>
				<li><a id="history" href="history.html" data-icon = "star" data-ajax=false>推荐</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>